<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <style>
        input:focus {
            filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
                    progid:DXImageTransform.Microsoft.Blur(pixelradius=5)
                    progid:DXImageTransform.Microsoft.Wheel(duration=4);
            -webkit-filter: drop-shadow(0 1px 5px rgba(235, 45, 253, 0.5));
            -moz-filter: drop-shadow(0 1px 5px rgba(235, 45, 253, 0.5));
            -ms-filter: drop-shadow(0 1px 5px rgba(245, 12, 253, 0.5));
            -o-filter: drop-shadow(0 1px 5px rgba(235, 45, 253, 0.5));
            filter: drop-shadow(0 1px 5px rgba(128, 255, 150, 0.5));
        }
    </style>
</head>
<body>
<div id="app">
    <h3 align="center">添加书籍</h3>
    <form action="" method="post" align="center">
            书名：<input id="bookName" name="bookName" v-model="book.bookName"><br>
            作者：<input id="writer" name="writer" v-model="book.writer"><br>
            简介：<input id="description" name="description" v-model="book.description"><br>
            <input type="button" id="btn" v-on:click="submitFrom" value="提交"/>
    </form>
</div>
</body>
<script>
    new Vue ({
        el:"#app",
        data:function () {
            return {
                book:{}
            }
        },
        methods: {
            submitFrom() {
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/BigHomeworkProject/addBookServlet",
                    data: _this.book
                }).then(resp => {
                    if(resp.data == "success") {
                        alert("新增成功");
                        window.location.href = "http://localhost:8080/BigHomeworkProject/html/library.html";
                    }
                });
            }
        }
    })
</script>
</html>